<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" :checked="mainRadioStatus" @change="handlerChangeAll(!mainRadioStatus)"/>
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <TodoItem v-for="item in renderList" :key="item.id" :item="item"/>
    </ul>
  </section>
</template>

<script setup lang="ts">
import TodoItem from './TodoItem.vue'
import { storeToRefs } from 'pinia';
import useStore from '../store'
import { renderList } from 'vue';
const { main } = useStore()

const { getTodos, updateAllStatus } = main
getTodos()
const { renderList, mainRadioStatus } = storeToRefs(main)

function handlerChangeAll(done: boolean) {
  updateAllStatus(done)
}
</script>

<style scoped lang="less">

</style>
